<template>
  <!--  病案搜索-->
  <el-card style="margin:0 20px 10px;height: 140px;">
    <el-form :inline="true">
      <el-form-item label="病案号" style="width:370px;" >
        <el-input placeholder="请输入" style="width:250px;" v-model="searchCaseForm.caseId"></el-input>
      </el-form-item>
      <el-form-item  label="住院号" style="width:370px;" >
        <el-input placeholder="请输入" style="width:250px;" v-model="searchCaseForm.hsptNum"></el-input>
      </el-form-item>
      <el-form-item label="姓名" style="width:370px;" >
        <el-input placeholder="请输入" style="width:250px;" v-model="searchCaseForm.name"></el-input>
      </el-form-item>
      <br>
      <el-form-item label="证件号" style="width:357px;" >
        <el-input placeholder="请输入" style="width:250px;" v-model="searchCaseForm.idCardId"></el-input>
      </el-form-item>
      <el-form-item label="录入时间" style="width:608px;" >
        <el-date-picker
            type="date"
            placeholder="请选择"
            style="width:250px;"
            v-model="searchCaseForm.createTime"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadCaseList"><el-icon><Search /></el-icon>查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 病案列表 -->
  <el-card style="margin:20px;">
    <el-button type="primary" style="float:right;margin-bottom: 20px;margin-top: 5px" @click="router.push('/record/medicalCreate')">新增病案</el-button>
    <el-table :data="caseArr" :header-cell-style="{background:'#D7D7D7',color:'#000000'}">
      <!--      <el-table-column type="index" label="编号" width="80" align="center"/>-->
      <el-table-column prop="caseId" label="病案号" align="center" />
      <el-table-column prop="hsptNum" label="住院号" align="center" />
      <el-table-column prop="payType" label="医疗付款方式" align="center" :formatter="payTypeFormatter"/>
      <el-table-column prop="hsptCount" label="住院次数" align="center" />
      <el-table-column prop="name" label="姓名" align="center" />
      <el-table-column prop="gender" label="性别" align="center" :formatter="genderTypeFormatter"/>
      <el-table-column prop="idCardId" label="证件号" align="center" />
      <el-table-column prop="createTime" label="录入时间" align="center"/>
      <el-table-column label="操作" align="center" >
        <template #default="scope">
          <el-button link type="primary" size="small" >编辑</el-button>
          <!--          <el-button link type="primary" size="small" >打印</el-button>-->
          <el-dropdown trigger="click">
            <span style="font-size: 12px;color: #7F7F7F; margin-top: 4px">更多<el-icon ><arrow-down/></el-icon></span>
            <template #dropdown>
              <span style="align-items: center;">
              <el-dropdown-menu class="el-dropdown-menu">
                <el-dropdown-item style="color: #9353E5">归档</el-dropdown-item>
                <el-dropdown-item style="color: #EC2121">删除</el-dropdown-item>
              </el-dropdown-menu>
              </span>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination layout="prev, pager, next,sizes,total"
                   @current-change="handleCurrentChange" @size-change="handleSizeChange"
                   :current-page="currentPage"
                   :page-sizes="[5, 10, 20, 30]"
                   :page-size="pageSize"
                   :total="totalCount"
                   background
                   style="float: right;padding-top:27px;padding-bottom:27px;padding-right: 10px"
    />
  </el-card>
</template>
<script setup>
import axios from "axios";
import {ElMessage} from "element-plus";
import {onMounted, ref} from "vue";
import qs from "qs";
import router from "@/router";


// 定义分页总页数
const totalCount=ref(0);
//定义当前页码
const currentPage=ref(1);
//定义每页显示条数
const pageSize=ref(5);

//分页
const handleSizeChange=(val)=>{
  pageSize.value=val;
  loadCaseList();
}
const handleCurrentChange=(val)=>{
  currentPage.value=val;
  loadCaseList();
}


// 定义一个病案列表数据数组
const caseArr=ref([]);
// 定义搜索病案表单数据
const searchCaseForm=ref({
  caseId:'',
  hsptNum:'',
  name:'',
  idCardId:'',
  createTime:''
});
// 加载病案列表数据方法、分页方法
const loadCaseList=()=>{
  let data1=qs.stringify(searchCaseForm.value);
  //获取总数据条数
  axios.get(getBaseURL(5)+'/v1/hospitalization/hspt/select?'+data1)
      .then((response)=>{
        if (response.data.code==2000){
          totalCount.value=response.data.data.length;
        }else {
          ElMessage.error(response.data.msg);
        }
      });
  searchCaseForm.value.offset=(currentPage.value-1)*pageSize.value;
  searchCaseForm.value.limit=pageSize.value;
  let data2=qs.stringify(searchCaseForm.value);
  axios.get(getBaseURL(5)+'/v1/hospitalization/hspt/select?'+data2)
      .then((response)=>{
        if (response.data.code==2000){
          caseArr.value=response.data.data;
          console.log(response.data.data);
          searchCaseForm.value.limit=0;
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}
onMounted(()=>{
  loadCaseList();
});
// 重置按钮
const resetSearch=()=>{
  searchCaseForm.value={};
  loadCaseList();
}
//定义数组用来保存请求回来的字典项
const payTypeArr = ref([]);
const genderTypeArr = ref([]);

onMounted(()=>{
  loadDictOptions(payTypeArr,'pay_type_way');
  loadDictOptions(genderTypeArr,'sys_user_sex');

})
//对支付方式类型显示内容进行文字转换
const payTypeFormatter = (row,column,cellValue,index)=>{
  if(!payTypeArr.value){
    return cellValue;
  }
  for(let item of payTypeArr.value){
    if(item.ICD10 == cellValue){
      cellValue = item.name;
    }
  }
  return cellValue;
}
//对性别类型显示内容进行文字转换
const genderTypeFormatter = (row,column,cellValue,index)=>{
  if(!genderTypeArr.value){
    return cellValue;
  }
  for(let item of genderTypeArr.value){
    if(item.dictValue == cellValue){
      cellValue = item.dictLabel;
    }
  }
  return cellValue;
}

</script>


<style scoped>


</style>
